import {Component, HostBinding, HostListener} from '@angular/core';
import {CommonModule} from '@angular/common';

@Component({
  selector: 'app-custom-toggle',
  standalone: true,
  imports: [CommonModule],
  template: `
      <div style="background-color: olive; color: white">
          <p>
              custom-toggle works!--value={{value}}
          </p>
      </div>
  `,
  styles: ``,
  host: {
    'role': 'presentation',
    '[value]': 'value',
  }
})
export class CustomToggleComponent {

  value: string = 'CustomToggleComponent'

  disabled: boolean = false;

  //注意：
  //始终更喜欢使用host属性而不是@HostBinding和@HostListener。 这些装饰器的存在只是为了向后兼容。

  //绑定属性
  @HostBinding('attr.aria-valuenow')
  num: number = 0;
  @HostBinding('tabIndex')
  getTabIndex() {
    return this.disabled ? -1 : 0;
  }
  //绑定事件
  @HostListener('keydown', ['$event'])
  updateValue(event: KeyboardEvent) {
    console.log('>>>>>host listener keydown', event)
  }
  @HostListener('click', ['$event'])
  btnClick($event: any) {
    alert('dddddddddd')
  }
}
